<template>
    <transition name = "fade">
    <div id="searchform" class="searchform"    v-if="isShow">
        <div class="mask color-change-2x"></div>
        <div class="inner slide-in-blurred-top">
            <input type="text" name="s" class="text" @keyup.enter="searchMeth" x-webkit-speech="" v-model="keywords" placeholder="输入关键词搜索" value="">
            <div class="submit " @click="searchMeth">
                <i class="el-icon-search el-icon--right"></i>
                搜索</div>
        </div>


    </div>
    </transition>
</template>

<script>
    export default {
        name: "search",
        props: {
            isShow: {
                type: Boolean,
                default: false,
            }
        },

        watch: {
            isShow:function(val) {
                this.isShow=val;
            }

        },
        data() {
            return {
                isClose: false,
                keywords:""


            }

        },
        methods:{
            searchMeth(){
              console.log("search"+this.keywords);


            }
        }


    }
</script>

<style scoped>
    .searchform{
        z-index: 99;
    }
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 0;
    }


    .slide-out-top {
        -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @-webkit-keyframes slide-out-top {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }
    }

    @keyframes slide-out-top {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }
    }


</style>